<!--
 * @Description:
 * @Author: Ronda
 * @Date: 2021-06-24 23:56:19
 * @LastEditors: Ronda
 * @LastEditTime: 2021-06-27 09:38:11
-->
<template>
  <!-- 订单详情页 -->
  <div class="orderDetail">
    <!-- 头部返回按钮 -->
    <div class="header">
      <a href="#" @click="$router.go(-1)">返回</a>
    </div>
    <!-- 中间表格部分 -->
    <div class="center">
      <el-table :data="orderLines" stripe style="width: 100%">
        <el-table-column
          prop="id"
          label="订单编号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="productId"
          label="产品编号"
          width="180"
          align="center"
        />
        <el-table-column prop="product.name" label="产品名称" align="center" />
        <el-table-column prop="product.photo" label="产品图片" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="right">
              <img
                slot="reference"
                :src="scope.row.product.photo"
                alt="图片加载失败"
              />
              <img
                :src="scope.row.product.photo"
                alt="图片加载失败"
                style="width: 200px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="product.price"
          label="单价"
          width="180"
          align="center"
        />
        <el-table-column
          prop="number"
          label="数量"
          width="180"
          align="center"
        />
      </el-table>
    </div>
    <!-- 底部卡片显示 -->
    <div class="later">
      <div class="card">
        <div class="head">订单基本信息</div>

        <el-card shadow="always">
          <p>订单编号：{{ id }}</p>
          <p>订单金额：{{ orderInfo.total }}</p>
          <p>下单时间：{{ orderInfo.orderTime }}</p>
          <p>订单状态：{{ orderInfo.status }}</p>
        </el-card>
      </div>
      <div v-if="orderInfo.status !== '待派单'" class="card">
        <div class="head">接单者信息</div>

        <el-card shadow="always">
          <p>接单者：{{ employee.username }}</p>
          <p>接单者手机号：{{ employee.telephone }}</p>
        </el-card>
      </div>

      <div class="card">
        <div class="head">下单者信息</div>
        <el-card shadow="always">
          <p>下单者：{{ customer.username }}</p>
          <p>下单者手机号：{{ customer.telephone }}</p>
        </el-card>
      </div>

      <div class="card">
        <div class="head">雇主信息</div>
        <el-card shadow="always">
          <p>雇主：{{ address.username }}</p>
          <p>雇主手机号：{{ address.telephone }}</p>
          <p>服务地址：{{ address.city }}{{ address.area }}</p>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderDeatil } from "@/api/order";
export default {
  data() {
    return {
      // 订单编号
      id: "",
      // 订单状态
      status: "",

      // 订单数据
      orderLines: [],
      // 订单信息
      orderInfo: {},
      // 雇主地址信息
      address: {},
      // 下单者信息
      customer: {},
      // 接单者信息
      employee: {},
    };
  },
  computed: {},
  created() {
    /* this.$route.query.index是订单页传递的id值，需要发送请求，获取订单的详情数据，设置到数据模型中，然后vue视图中使用这些数据。 */
    // alert(this.$route.query.index);
    // 获取传递过来的订单id值
    this.id = this.$route.query.index;
    // 通过id获取到详情
    this.getDetail();
  },
  mounted() {},
  methods: {
    // 获取详情信息
    async getDetail() {
      const res = await getOrderDeatil({ id: this.id });
      this.orderLines = res.data.orderLines;
      this.orderInfo = res.data;
      this.address = res.data.address;
      this.customer = res.data.customer;
      this.employee = res.data.employee;
      // console.log(res);
    },
  },
};
</script>
<style lang="scss" scoped>
// 头部
.header {
  a {
    color: #56c4bd;
  }
}
// 中间
.center {
  img {
    width: 30px;
    height: 30px;
  }
}
// 底部
.el-card__body {
  padding: 0;
}
.later {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  .card {
    box-sizing: border-box;
    width: 24%;

    .head {
      color: #fff;
      padding: 20px;
      height: 55px;
      background-color: #56c4bd;
    }
  }
}
</style>
